<template>
    <div class="personalHome myassets">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.add_16')}}</h2>
            <div class="personCon">
                <div class="infopanel">
                    <div class="pabelHead clearfix">
                        <h2 class="persontitle fl">{{$t('l.add_16')}}</h2>
                        <div class="searchput fr">
                            <input :placeholder="$t('l.trade_2')" v-model="likecoin" @input="searchcoin">
                            <i @click="searchcoin"></i>
                        </div>
                        <div class="checkbar fr" @click="hiddenassets">
                            <label for="ishdaset" class="checkbox" :class="ishdaset?'active':''">
                                <span>{{$t('l.add_17')}}</span>
                                <div class="asetstip">
                                    <img src="../../assets/images/question-circle.png">
                                    <div class="tipsbox">
                                        {{$t('l.add_18')}}
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="recordbox">
                            <table class="recordtable">
                                <thead>
                                    <tr>
                                        <th class="sort pdl32" width="15%" :class="{'up':currencySort==1,'down':currencySort==2}" @click="coinsort()">{{$t('l.home_11')}}</th>
                                        <th width="17%">{{$t('l.market_about9')}}</th>
                                        <th width="15%">{{$t('l.market_popup11')}}</th>
                                        <th width="15%">{{$t('l.personal_199')}}</th>
                                        <th width="20%" class="sort" :class="{'up':amountSort==1,'down':amountSort==2}" @click="amountsort()">{{$t('l.add_19')}}</th>
                                        <th width="18%" class="center">{{$t('l.trade_41')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in assetsList" :key="index">
                                        <td class="sort pdl32">
                                            {{item.code}}
                                            <div class="tips" v-if="item.tips">
                                                <img src="../../assets/images/warning-circle.png">
                                                <div class="tipsbox">
                                                    {{item.tips}}
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{item.total.toFixed(item.precis?item.precis:4)}}</td>
                                        <td>{{item.availableAmount}}</td>
                                        <td>{{item.frozenAmount}}</td>
                                        <td >
                                            <span class="btc">₿{{item.btcValuation}}</span>
                                           <span class="cny">≈ ${{item.usdtValuation}}</span>
                                        </td>
                                        <td class="center">
                                            <router-link class="probtn" :to="!item.isDepositable?'':{ path: '/recharge', query: {coin: item.code} }" :class="!item.isDepositable?'gray':''" :disabled="!item.isDepositable">{{$t('l.personal_197')}}</router-link>
                                            <router-link class="probtn" :to="!item.isWithdrawable?'':{ path: '/withdraw', query: {coin: item.code} }" :class="!item.isWithdrawable?'gray':''" :disabled="!item.isWithdrawable">{{$t('l.add_20')}}</router-link>
                                            <a class="probtn">
                                                <!-- <span @click="gettradeway(item.currencyId)">{{$t('l.add_21')}}</span> -->
                                                <div class="pairbar" v-show="item.active">
                                                    <p v-for="(ntem,ndex) in symbol" :key="ndex">
                                                        <router-link :to="{ path: '/trade', query: {symbol: ntem.symbol} }" v-if="ntem.symbol!=='USDT'">{{ntem.symbol}}</router-link>
                                                        <router-link to="/tradeMarket" v-else>{{$t('l.personal_103')}}</router-link>
                                                    </p>
                                                </div>
                                            </a>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                    <div class="pagesbar" style="text-align:center;">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            hide-on-single-page
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-size="pageSize"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import {compute} from '@/assets/js/compute';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data(){
        return {
            assetsList:[],
            ishdaset:false,
            likecoin:"",
            symbol:[],
            pageNum:1,
            pageSize:10,
            total:0,
            amountSort:0,
            currencySort:0
        }
    },
    created(){
        let intro = this.$store.state.userintro;
        this.getassetsList();
    },
    methods:{
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getassetsList();
        },
        hiddenassets(){
            this.ishdaset = !this.ishdaset;
            this.getassetsList();
        },
        searchcoin(){
            let that = this;
            that.pageNum = 1;
            that.total = 0;
            this.getassetsList();
        },
        coinsort(){
            if(this.currencySort==0){
                this.currencySort=1
            }else if(this.currencySort==1){
                this.currencySort=2
            }else{
                this.currencySort=1
            }
            this.amountSort = 0;
            this.getassetsList();
        },
        amountsort(){
            if(this.amountSort==0){
                this.amountSort=1
            }else if(this.amountSort==1){
                this.amountSort=2
            }else{
                this.amountSort=1
            }
            this.currencySort = 0;
            this.getassetsList();
        },
        async gettradeway(id){
            let that = this;
            let res = await api.currencyTradeWay({currencyId:id});
            if(res.data.code==0){
                that.symbol = [];
                if(id!==6){
                    res.data.data.forEach((item,index)=>{
                        that.symbol.push(item);
                    })
                }else{
                    that.symbol.push({symbol:'USDT'});
                }

                that.assetsList.forEach((item,index)=>{
                    if(item.currencyId==id && id!==6){
                        if(res.data.data.length>0){
                            item.active = !item.active;
                        }else{
                            item.active = false;
                            that.$layer.msg("该币种暂无交易对");
                        }
                    }else if(item.currencyId==id && id==6){
                        item.active = true;
                    }else{
                        item.active = false;
                    }
                })
            }
        },
        //获取资产列表
        async getassetsList(){
            let that = this;
            let res = await api.assetsList({
                amountSort:that.amountSort,
                currencySort:that.currencySort,
                currency:that.likecoin,
                isHide:that.ishdaset
            })
            if(res.data.code==0){
                that.assetsList = [];
                res.data.data.forEach((item,index)=>{
                    if(index>=(that.pageNum-1)*that.pageSize && index<that.pageNum*that.pageSize){
                        item.total = compute.dcmAdd(Number(item.availableAmount),Number(item.frozenAmount));
                        item.active = false;
                        item.tips = "";
                        if(item.forbiddenReason.length>0){
                            item.tips = item.forbiddenReason[0].content;
                        }
                        that.assetsList.push(item);
                    }
                })
                that.total = res.data.data.length;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
    },
    mounted(){

    }
}
</script>
<style lang="less" scoped>
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;

    }
    .pagesbar {
        width: 100%;
        text-align: center;
        margin-top: 40px;
    }
}
.myassets{
    .pabelHead{
        border-bottom:1px solid #E9EEF4;
    }
    .recordbox{
		overflow-y: auto;
        padding-top:14px;
        height:555px;
        .tips{
            display:inline-block;
            vertical-align: middle;
            position:relative;
            &:hover{
                .tipsbox{display:block;}
            }
            .tipsbox{
                display:none;
                position: absolute;
                bottom: 24px;
                left: -15px;
                padding: 12px 16px;
                width: 115px;
                z-index:9;
                background: #fff;
                box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
                border-radius: 3px;
                font-size: 14px;
                font-weight: 400;
                color: #33385e;
                line-height: 22px;
                &:after{
                    content: "";
                    position: absolute;
                    width: 10px;
                    height: 6px;
                    bottom: -6px;
                    left: 16px;
                    background:url(../../assets/images/Triangle1@2x.png) no-repeat center;
                }
            }
        }
        .probtn{
            span{
                position:relative;
            }
            &.gray{
                color:#333;
                cursor: inherit;
            }
            .pairbar{
                right: -25px;
                top: 20px;
                a{
                    display:block;

                }
                &:after{
                    left: 60px;
                }
                &:before{
                    content:"";
                    top:-30px;
                    left:0;
                    position:absolute;
                    width:100%;
                    height:30px;
                }
            }
            // &:hover{
            //     .pairbar{display:block;}
            // }
        }
    }
    .checkbar{
        padding-right:55px;
        position: static;
        padding-top: 5px;
        cursor:pointer;
        i{
            display:inline-block;
            vertical-align:middle;
            width:14px;
            height:14px;
            margin-right:4px;
            &.active{
                background:url(../../assets/images/checkicon.png) no-repeat center;
            }
        }
        span{
            font-size:14px;
            font-weight:400;
            color:rgba(51,56,94,1);
            line-height:22px;
            padding-right:6px;
        }
        .asetstip{
            display: inline-block;
            vertical-align: middle;
            img{width:14px;height:14px;}
            position:relative;
            &:hover{
                .tipsbox{display:block;}
            }
            .tipsbox{
                display:none;
                position:absolute;
                bottom: 24px;
                left: -15px;
                padding:12px 16px;
                width: 115px;
                z-index:9;
                background:#fff;
                box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
                border-radius:3px;
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:22px;
                &:after{
                    content:"";
                    position:absolute;
                    width:10px;
                    height:6px;
                    bottom:-6px;
                    background:url(../../assets/images/Triangle1@2x.png) no-repeat center;
                }
            }
        }
    }
}
</style>
<style scoped>
.btc{
        display: block;
    line-height: 24px;
}
.cny{
    font-size: 12px;
    color: #999;
    display: block;
}
</style>
